<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>  
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="shop">
    <meta name="author" content="letsun">

    <title>订单列表</title>

   	<%@ include file ="../init.jsp" %>
    <script src="${resources}/js/jqPaginator.min.js"></script>
    <script src="${resources}/js/moment.js"></script>
    <style>
        table td a {
            color: #666;
        }

        .order-receiverName {
            padding-right: 20px;
        }

        .order-total em {
            color: red;
        }

        .pageBtn {
            position: absolute;
            bottom: 50px;
            border: 1px solid #ccc;
            border-radius: 5px;
            left: 50%;
            -webkit-transform: translate(-50%, 0);
            -moz-transform: translate(-50%, 0);
            -ms-transform: translate(-50%, 0);
            -o-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
                z-index: 100;
        }

        .pageBtn li {
            width: 40px;
            height: 40px;
            float: left;
            border-right: 1px solid #ccc;
            text-align: center;
            line-height: 40px;
        }

        .pageBtn li:last-child {
            border: none;
        }

        .pageBtn .prev, .pageBtn .next {
            width: 60px;
        }

        .pageBtn .active{
            background-color: #2196F3;
            color: #fff;
        }
        
    </style>
    <link rel="stylesheet" type="text/css" href="${resources}/css/myOrder.css">

</head>

<body>
<%@ include file="../header_1.jsp" %>

<!--- 导航： end -->
<div class="container">
    <div class="row">
        <div class="col-md-1">
            <%@ include file="../menu.jsp" %>
        </div>
        <div class="col-md-11">
            <!-- page-header -->
            <div class="page-header">
                <div class="page-comm">
                    <div class="mt">
                        <h3>我的订单</h3>
                    </div>
                    <div class="mc">
                        <p>查询自己的订单</p>
                    </div>
                </div>
            </div>
            <!-- /.page-header -->

            <!-- page-content -->
            <div class="page-content">
                <div class="page-comm">

                    <ul class="nav nav-tabs">
                        <li  class="active" data-status="all">
                            <a  href="#" >全部订单</a>
                        </li>
                        <li data-status="1">
                            <a href="#" class="txt">待付款</a>
                        </li>
                        <li data-status="3">
                            <a  href="#"  class="txt">待发货</a>
                        </li>
                        <li data-status="4">
                            <a href="#"  class="txt">待收货</a>
                        </li>
                         <li data-status="7">
                            <a href="#"  class="txt">已签收</a>
                        </li>
                    </ul>

					<!--订单遍历-->
					<div id="pageCon">
                  	 
                    </div>
					<!--订单遍历结束-->
                </div>
                <div id="notdata">
                   <img src="${resources}/images/10_9_03.png" alt="">
                   <p>嗷～这里还没有订单～</p>
                   <div>推荐您去：<a href="javascript:;">首页</a>逛逛</div>
               </div>
            </div>
            <!-- /.page-content -->
        </div>
    </div>
</div>

<%@ include file="../footer.jsp" %>
<!-- footer:页脚  end -->

<script type="text/javascript">
    var $path = "/shop-pc";
</script>
<script>
var selData = ({
		pageNumber : 1
	})

    function paging(cfg) {
        var paginator = $("#pageCon");

        paginator.jqPaginator({
            totalCounts: 500,//总条目数
            pageSize: 5,//每一页显示的条目数
            visiblePages: 5,//分多少页
            currentPage: 1,//当前页数
            first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
            prev: '<li class="prev"><a href="javascript:void(0);">上一页<\/a><\/li>',
            next: '<li class="next"><a href="javascript:void(0);">下一页<\/a><\/li>',
            last: '<li class="last"><a href="javascript:void(0);">末页<\/a><\/li>',
            page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
            wrapper: '<ul class="pageBtn"></ul>',

            //页面加载和点击页码时请求数据
            onPageChange: function (num) {
            	selData.pageNumber= num;
                $.get(cfg.url,selData, function (res) {
                 if (res.count == 0) {
               		notdata();
                	 return;
                 }
                 var html = "";
                 //重新配置分页的总条目数
                 var count = -(res.msg) * (-1);
                // var count = 50;
                  paginator.jqPaginator('option', {
                	 totalCounts: count
                 });
				 if(res.code=="111"){
					 notdata();
					 return ;
				 }
                 for (var i = 0; i < res.result.length; i++) {
               		 var itemList = res.result[i].orderItemList;
	                 html+='<div class="mc" style="margin-top:10px;padding-bottom: 60px;position: relative">';
	                 html+='<table class="table table-bordered">';
	               	 html+='<thead>';
	           		 html+='<tr>';
	      			 html+='<th style="width:50%">订单详情</th>';
	   				 html+='<th>数量</th>';
	   				 html+='<th>总计</th>';
	  				 html+='<th>状态</th>';
				   	 html+='</tr>';
			   		 html+='</thead>';
		   			 html+='<tbody>';
	   				 html+='<tr style="background-color:#f5f5f5">';
	   				 html+='<td colspan="4" style="text-align:left">';
	   				 html+='<div class="clearfix">';
	   				 html+='<div class="pull-left">';
	   				 var ns = moment(res.result[i].order.createTime).format('YYYY-mm-DD, hh:mm:ss');
	   				 html+='<span>时间：'+ns+'</span></br>';
					 html+='<span>订单号：<a href="#"> '+ res.result[i].order.orderno+'</a></span>';
					 html+='</div>';
					 html+='<span class="pull-right">';
					 html+='<span class="fr"><a onclick="return confirm(是否确认删除)" href="http://192.168.1.42:8080/shop-pc/manage/order/delete/207" class="">删除</a></span>';	
				     html+='</span>';
				     html+='</div>';
				     html+='</td>';
				     html+='</tr>';
				     html+='<tr style="background-color:#f5f5f5">';
			    	 html+='<td colspan="4" style="text-align:left">';
		    		 html+='<div class="clearfix">';
	    			 html+='<div class="pull-left">';
	   				// html+='<span class="order-receiverName">收货人：'+res.result[i].order.receiver+'</span>';
					 html+='<span class="order-total">订单金额：<em>¥'+res.result[i].order.actualPrice+'</em></span>';
					 html+='</div>';
					 html+='<div class="pull-right">';
					 //html+='<span class="order-status"> 订单状态：新订单';
	                 html+='</span>';
	               	 html+='</div>';
	           		 html+='</div>';
	       			 html+='</td>';
	   				 html+='</tr>';
	   				 //shangpin
	   				 for (var j = 0; j <itemList.length; j++) {
		  				 html+='<tr>';
				    	 html+='<td>';
			    		 html+='<div class="pull-left">';
		    			 html+='<div class="p-img">';
		   				 html+='<a href="http://192.168.1.42:8080/shop-pc/goods/4" target="_blank">';
						 html+='<img class="" src="'+itemList[j].goods.picurl+'" title="" data-lazy-img="done" width="60" height="60">';
						 html+=itemList[j].goods.name+'</a>';
						 html+=' </div>';
						 html+='<div class="p-msg">';
						 html+='<div class="p-name">';
						 html+='<a href="http://192.168.1.42:8080/goods/4" target="_blank" title=""></a>';
					     html+='</div>';
				    	 html+='</div>';
			    		 html+='</div>';
		    			 html+='</td>';
		   				 html+='<td>'+itemList[j].amount+'</td>';
						 html+='<td>';
						 html+='<div>¥'+itemList[j].price+'</div>';
						 html+='<div>在线支付</div>';
						 html+='</td>';
						 html+='<td rowspan='+itemList.length+'>';
						/*  html+='<div>';
						 html+='新订单';
						 html+='</div>'; */
						 html+='<div>';
						 if( res.result[i].order.status==1){
							 html+='<span style="color:red">未支付</span>';
						 }
						 if(res.result[i].order.status==3){
							 html+='<span style="color:red">待发货</span>';
						 }
						 if(res.result[i].order.status==4){
							 html+='<span style="color:red">待签收</span>';
						 }
						 if(res.result[i].order.status==5){
							 html+='<span style="color:red">已签收</span>';
						 }
						 html+='</div>';
						 html+='<div><a href="http://192.168.1.42:8080/shop-pc/manage/order/207"><b>订单详情</b></a>';
						 html+='</div>';
						 html+='</td>';
						 html+='</tr>';
	   				 }
					 //shangpinjieshu
					 html+='<tr>';
					 if( res.result[i].order.status==1){
						 html+='<td colspan="3" style="border-right:none"></td><td style="border-left:none;text-align:right;"><a class="btn btn-danger" href="http://192.168.1.42:8080/shop-pc/alipay/gopay/207">付款</a></td>';
					 }
					 html+='</tr>';
	                 html+='</tbody>';
	                 html+='</table>';
	                 html+='</div>';
                 
                 
                 }

                 $("#pageCon").append(html);
                 });

          

            }
        });
    }
    paging({url: "${path}/manage/myCenter/orderData?status=all"});
    
    $(".nav-tabs").find("li").on("click",function(){
    	var status=$(this).data("status");
    	
    	$(".nav-tabs").find("li").removeClass("active");
    	
    	$(this).addClass("active");
    	
    	paging({url: "${path}/manage/myCenter/orderData?status="+status});
    })
     function notdata() {
        $("#pageCon").hide();
        $("#notdata").show();
    }
 </script>
</body>
</html>